<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        button {
            cursor: pointer;
        }

        input {
            outline: none;
            background-color: antiquewhite;
            border: none;
            border-radius: 3px;
            width: 250px;
            height: 30px;
            margin: 15px;
        }

        input::-webkit-input-placeholder {

            color: #999;
        }

        /* 解决li前面的点删除后还占空间的问题 */
        ul {
            padding: 0;
            margin: 0;
        }

        ul>li {
            list-style: none;
        }

        .border {
            width: 500px;
            background-color: #999;
            border-radius: 20px;
            margin: auto;
            padding-bottom: 20px;
        }

        .border .title {
            font-size: 24px;
            color: aliceblue;
            line-height: 50px;
            text-align: center;
        }

        .form {
            width: 80%;
            margin: 15px auto;
        }

        .form #add {
            width: 100px;
            height: 30px;
            border-radius: 5px;
            border: 0;
            font-weight: 600;
            font-size: 16px;
            color: #999;
            letter-spacing: 6px;
        }

        /* 每一条li，代表每一条事件 */
        .item {
            display: flex;
            justify-content: space-between;
            line-height: 30px;
            font-size: 14px;
            color: rgb(75, 73, 73);
            padding: 5px 0;
            border-bottom: 1px solid white;
        }

        .item .info {
            margin-left: 10px;
        }

        .list .item .edit,
        .fin,
        .del {
            width: 50px;
            height: 30px;
            border: 0;
            border-radius: 5px;
            color: white;
        }

        .edit {
            background-color: #337ab7;
        }

        .fin {
            background-color: #20c248;
        }

        .del {
            background-color: #d9534f;
        }

        .btn {
            display: inline-block;
            width: 180px;
            margin-right: 0;
        }

        /* 点击完成按钮后所添加的新类名finished */
        .finished {
            color: rgb(112, 110, 110);
            background-color: rgb(197, 190, 190);
            border-radius: 3px
        }

        .finished>.info {
            /* 为文字添加删除线 */
            text-decoration: line-through;
        }
        .w{
            width: 94%;
            margin: auto;
            border-radius: 3px;
            background-color: #cababa;
            box-shadow: 2px 2px rgb(164, 149, 149);
        }
    </style>
</head>

<body>
    <!-- 备忘录外层边框 -->
    <div class="border">
        <!-- 标题 -->
        <div class="title">备忘录</div>

        <!-- 输入框和按钮 -->
        <div class="form">
            <input type="text" name="text" placeholder="请填写您的事件">
            <button id="add">添加</button>
        </div>

        <!-- 备忘录事件列表 -->
        <div class="w">
            <ul class="list">
                <li class="item">
                    <!-- 事件区域 -->
                    <span class="info">事件1</span>
                    <!-- 按钮区域 -->
                    <div class="btn">
                        <button class="edit">编辑</button>
                        <button class="fin">完成</button>
                        <button class="del">删除</button>
                    </div>
                </li>
                <li class="item">
                    <!-- 事件区域 -->
                    <span class="info">事件2</span>
                    <!-- 按钮区域 -->
                    <div class="btn">
                        <button class="edit">编辑</button>
                        <button class="fin">完成</button>
                        <button class="del">删除</button>
                    </div>
                </li>
            </ul>
        </div>
    </div>


    <script>
        //insertAdjacentHTML在指定的地方插入html标签语句
        //beforeBegin: 插入到标签开始前 afterBegin: 插入到标签开始标记之后
        //beforeEnd: 插入到标签结束标记前 afterEnd: 插入到标签结束标记后
        // finished 添加

        // 绑定事件
        let oinput = document.querySelector('.form input');
        let addBtn = document.querySelector('#add');
        let olist = document.querySelector('.list');

        addBtn.addEventListener('click', function () {
            olist.insertAdjacentHTML('afterBegin',
                `
                <li class="item">
                        <!-- 事件区域 -->
                        <span class="info">${oinput.value}</span>
                        <!-- 按钮区域 -->
                        <div class="btn">
                            <button class="edit">编辑</button>
                            <button class="fin">完成</button>
                            <button class="del">删除</button>
                        </div>
                    </li>
            `);
            
            // 完成编辑删除和完成事件
            olist.querySelector('.del').addEventListener('click', function () {
                let item = this.parentNode.parentNode;
                item.remove();
            });
            olist.querySelector('.fin').addEventListener('click', function () {
                let item = this.parentNode.parentNode;
                item.classList.add('finished');
            });
            olist.querySelector('.edit').addEventListener('click', function () {
                let item = this.parentNode.parentNode;
                item.querySelector('.info').innerText = prompt('编辑')
            });
            oinput.value = ''
        });

        let delBtn = document.querySelectorAll('.del');
        let finBtn = document.querySelectorAll('.fin');
        let editBtn = document.querySelectorAll('.edit');

        // 遍历 
        for (let i = 0; i < delBtn.length; i++) {
            delBtn[i].addEventListener('click', function () {
                let item = this.parentNode.parentNode;
                item.remove();
            });
            finBtn[i].addEventListener('click', function () {
                let item = this.parentNode.parentNode;
                item.classList.add('finished');
            });
            editBtn[i].addEventListener('click', function () {
                let item = this.parentNode.parentNode;
                item.querySelector('.info').innerText = prompt('编辑');
            });
        }
    </script>
</body>

</html>